<template>
  <div>
    <div class="x-warn-container" :style="{top:top,right:right,width:modelW,height:modelH}">
		<div class="x-warn" :style="{height:modelH,backgroundImage:'url('+borderBg+')'}">
			<div class="warn-title">
				<span class="sp-title">{{title}}</span>
			</div>
			<div class="warn-ctx">
				<!-- <x-cameraitem v-if="index==0" /> -->
				<x-dooritem v-if="index==0" @showdangan="showDeatil"/>
				<x-faceitem v-if="index==1" @showdangan="showDeatil"/>
				<x-caritem v-if="index==2" @showdangan="showDeatil"/>
				<x-collectitem v-if="index==3" @showdangan="showDeatil"/>
				<x-warnitem :leader="leader" @onRowClick="onRowClick" v-if="index==5" />
			</div>
		</div>



		<div class="x-warn" v-if="index==5" style="margin-top:1rem" :style="{height:modelH,backgroundImage:'url('+borderBg+')'}">
			<div class="warn-title">
				<span class="sp-title">最新上报信息</span>
			</div>
			<div class="warn-ctx">
				<x-reportitem />
			</div>
		</div>
	</div>
  <div class="x-unit"  v-if="showdangan" @click.self="showdangan=false" :style="{ height: `${deviceH}px` }">
		<div class="unit-ctx" :style="{ 'background-image': `url(${modelBg1})` }">
           <!-- 一人一档 -->
      <x-dangan :id="idNum" v-if="showdangan" @changedangan="changedangan"></x-dangan>
		</div>
	</div>
  </div>

</template>

<script>
import XWarnitem from '@/components/xwarnitem'
import XReportitem from '@/components/xreportitem'
import XCameraitem from '@/components/xcameraitem'
import XFaceitem from '@/components/xfaceitem'
import XCaritem from '@/components/xcaritem'
import XDooritem from '@/components/xdooritem'
import XCollectitem from '@/components/xcollectitem'
import XDangan from "@/components/xdanganmodel";

export default {
  name: 'xwarnitem',
  data () {
    return {
      borderBg: require('@/assets/images/bg_info.png'),
      showdangan:false,
      idNum:'',
      modelBg1: require('@/assets/images/modelBg.png'),
	    deviceH:0
    }
  },
  props: {
    map: {
      type: Object
    },
    index: {
      type: Number,
      default: -1
    },
    leader:{
      type:String
    },

    top: {
      type: String,
      default: '15%'
    },
    right: {
      type: String,
      default: '1.5rem'
    },
    modelW: {
      type: String,
      default: '522px'
    },
    modelH: {
      type: String,
      default: '385px'
    },
  },
  components: {
    XWarnitem,
    XReportitem,
    XCameraitem,
    XFaceitem,
    XCaritem,
    XDooritem,
    XCollectitem,
    XDangan
  },
  computed: {
    title () {
      switch (this.index) {
        case 0:
          return '人脸门禁'
          break
        case 1:
          return '人脸抓拍'
          break
        case 2:
          return '进出车辆'
          break
        case 3:
          return '自助采集'
          break

      }
    }
  },
    beforeMount () {
    let h = document.documentElement.clientHeight || document.body.clientHeight
    this.deviceH = h
  },
  methods: {
    onRowClick () {
      this.$emit('onRowClick')
    },
    showDeatil(id){
      this.showdangan=true;
      this.idNum=id
    },
    changedangan(){
      this.showdangan=false
    }
  }
}
</script>

<style lang="less" scoped>
	.x-warn-container {
		position: absolute;
		z-index: 2;
		height: auto;

		.x-warn {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			height: 22rem;

			.warn-title {
				width: 100%;
				height: 2.4rem;
				line-height: 2.4rem;
				text-align: center;
				font-size: 0.9rem;
				color: #333;
				position: relative;

				.sp-title {
					color: #e9e9e9;
					margin: 0px 0px 4px 0px;
					font-size: 0.9rem;
				}
			}

			.warn-ctx {
				width: 100%;
				height: calc(100% - 2.4rem);
				padding-bottom: 0.5rem;
				box-sizing: border-box;
			}
		}
  }
  	.x-unit {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 999;
		.unit-ctx {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1177px;
			height: 800px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			padding: 10px 30px;
			box-sizing: border-box;
		}
	}
</style>
